<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/head::commonHeaderList('promotion')">
    <!--<body oncontextmenu="self.event.returnValue=false" onselectstart="return false">-->
<!--<link rel="stylesheet"  th:href="@{/static/css/}" />-->
<body>
<div id="content" class="col-lg-12 col-sm-12">
    <div class="row">
        <div class="box col-md-12">
            <div class="box-inner">
                <div class="box-header well" data-original-title="">
                    <h2>
                        <i class="glyphicon glyphicon-user"></i> 活动列表
                    </h2>
                    <div class="box-icon">
                        <!-- <a href="#" class="btn btn-setting btn-round btn-default"><i class="glyphicon glyphicon-cog"></i></a> -->
                        <a href="javascript:void(0);" id="smaller" class="btn btn-minimize btn-round btn-default"><i class="glyphicon glyphicon-chevron-up"></i></a>
                        <!-- <a href="#"	class="btn btn-close btn-round btn-default"><i class="glyphicon glyphicon-remove"></i></a> -->
                    </div>
                </div>
                <div class="box-content">
                    <form class="form-inline" style="margin-bottom:0.5%" id="searchForm" role="form" method="post"
                          th:action="${#request.getRequestURI()}">
                            <div class="form-group ">
                                <select name="pageSize"  class="form-control input-sm" >
                                    <option value="10" th:selected="${pageSize==10}">10条/页</option>
                                    <option value="25" th:selected="${pageSize==25}">25条/页</option>
                                    <option value="50" th:selected="${pageSize==50}">50条/页</option>
                                </select>
                            </div>

                        <div class="form-group">
                            <select name="state" id="state" class="input-sm">
                                <option value="">--选择活动状态--</option>
                                <option value="1" th:selected="${state == '1'}">正常</option>
                                <option value="0" th:selected="${state == '0'}">已删除</option>
                            </select>
							<input type="searchKey" name="searchKey" th:value="${searchKey}" id="search" class="form-control input-sm" style="width:200px;" placeholder="请输入关键词" autocomplete="off">
							<button class="btn btn-info btn-sm" type="submit"> 查 询 </button>
                            <a th:if="${session.menuMap[282] != null and session.menuMap['282'] !=''}" id="add"  href="javascript:void(0)" onclick="subFunction(1,this)" class="btn btn-primary btn-sm "><span class="glyphicon glyphicon-plus-sign"></span> 添 加 </a>
                        </div>
                        <div class="form-group" style="display: none">
                                <div class="input-group input-group-sm">
                                    <input type="hidden" th:value="${pageInfo.pageNum}" name="pageNum" id="pageNum">
                                </div>
						</div>

                    </form>
                    <table class="table table-striped table-bordered table-hover footable" data-show-toggle="false">
                        <thead>
							<tr>
								<th style="text-align: center;" data-breakpoints="xs">活动名称</th>
								<th style="text-align: center;white-space:nowrap;">开始时间</th>
								<th style="text-align: center;white-space:nowrap;">结束时间</th>
								<th style="text-align: center;white-space:nowrap;">状态</th>
								<th style="text-align: center;white-space:nowrap;" data-breakpoints="xs">操作</th>
							</tr>
                        </thead>
                        <tbody>
							 <tr th:each="list,listStat: ${pageInfo.list}">
							    <td style="text-align: center;" th:text="${list.activityName}"> </td>
								<td style="text-align: center;" th:text="${#dates.format(list.startTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
								<td style="text-align: center;" th:text="${#dates.format(list.endTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
								<td style="text-align: center;" th:if="${list.state == '1'}">正常</td>
								<td style="text-align: center;" th:if="${list.state == '0'}"> 已删除</td>
								<td style="text-align: left;">
									 <a th:if="${session.menuMap[284] != null and session.menuMap['284'] !=''}" th:attr="data-id=${list.id},startTime=${#dates.format(list.startTime, 'yyyy-MM-dd HH:mm:ss')},endTime=${#dates.format(list.endTime, 'yyyy-MM-dd HH:mm:ss')},infoName=${list.activityName}"
									  onclick="subFunction(2,this)"  class="btn btn-primary eidt btn-sm"><span class="glyphicon glyphicon-edit"></span> 编 辑 </a>
									 <a th:if="${session.menuMap[283] != null and session.menuMap['283'] !=''}" th:attr="data-id=${list.id}"  onclick="delActivityInfo(this)"  class="btn btn-danger opblock-delete btn-sm"><span class="glyphicon glyphicon-remove"></span> 删 除 </a>
								</td>
							 </tr>
                        </tbody>
                    </table>
                    <div th:include="include/pageinfo::pager"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include/onload_js::onloadJSCustomList(~{::script})">
    <script>
		$(function(){
		     //自适应表格
            $('.footable').footable();
		});

		function selectYear() {
            WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss', isShowToday: true, isShowClear: true});
        }

        function endDate() {
            WdatePicker({ dateFmt: 'yyyy-MM-dd HH:mm:ss', isShowToday: true, isShowClear: true,minDate:'#F{$dp.$D(\'startDateStr\')}'});
        }

        function subFunction(type,obj){
		    var startTime = "";
		    var endTime = "";
		    var id = "";
		    var infoName = "";
		    if(type == 2){
                startTime = $(obj).attr("startTime");
                endTime = $(obj).attr("endTime");
                id = $(obj).attr("data-id");
                infoName = $(obj).attr("infoName");
		    }
            var html = '<div class="form-horizontal" id="css" style="margin-top:7%;margin-left:5%;" role="form">' +
              '<div class="form-group">' +
              '<label for="lastname" class="col-sm-3 control-label">活动名称:</label>' +
              '<div class="col-sm-8">' +
              '<input type="text" value="'+infoName+'" class="form-control" id="infoName" placeholder="请输入活动名称">' +
              '</div>' +
              '</div>'+
             '<div class="form-group">' +
              '<label  for="firstname" class="col-sm-3 control-label">开始时间:</label>' +
              '<div class="col-sm-8">' +
				'<input type="text" value="'+startTime+'" id="startDateStr" class="form-control" maxlength="10"  placeholder="请选择开始日期" onfocus="selectYear()"  autocomplete="off"/>'+
              '</div>' +
              '</div>'+
              '<div class="form-group">' +
              '<label  for="firstname" class="col-sm-3 control-label">结束时间:</label>' +
              '<div class="col-sm-8">' +
				'<input type="text" id="endDateStr"  value="'+endTime+'" class="form-control" maxlength="10"  placeholder="请选择开始日期"  onfocus="endDate()"  autocomplete="off"/>'+
              '</div>' +
              '</div>' +
              '<div class="form-group" style="margin-left:35%;margin-top:6%">' +
              '<button class="btn " type="button" onclick="layer.closeAll();">关闭</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' +
              '<button class="btn btn-primary" onclick="addAndUpdatePromotion('+type+','+id+')">提交</button>'+
              '</div>'+
              '</div>';
			//弹窗
			layer.open({
			  type: 1,
			  // skin: 'layui-layer-rim', //加上边框
			  title:'添加销售目标',
				resize:false,
			  scrollbar: false,
			  area: ['380px', '300px'], //宽高
			  content: html
			});
			//去掉滚动条
			$("#css").parent().css("overflow","scroll").css("overflow-x","hidden").css("overflow-y","hidden");
        }


         //添加或者 更新 Promotion
        function addAndUpdatePromotion(type,id){
		    var obj = {};
            if($("#infoName").val() ==''){
              layer.tips('请输入活动名', '#infoName', {
                    tips: [1, '#0FA6D8'],
                    tipsMore: false,
                    time: 3000
              });
              return;
            }

            if($("#startDateStr").val() == ''){
              layer.tips('请选择开始日期', '#startDateStr', {
                    tips: [1, '#0FA6D8'],
                    tipsMore: false,
                    time: 3000
              });
              return;
            }
            if($("#endDateStr").val() ==''){
             layer.tips('请选择结束日期', '#endDateStr', {
                    tips: [1, '#0FA6D8'],
                    tipsMore: false,
                    time: 3000
              });
              return;
            }
            if(new Date($("#endDateStr").val()) <= new Date($("#startDateStr").val())){
                layer.msg("结束日期要大于开始日期",{icon: 2});
                return
            }
            var url = "";
            if(type == 1){
              url = "/activityInfoCtl/addPromotion";
            }else{
              url = "/activityInfoCtl/updatePromotion";
            }
            obj.activityName = $("#infoName").val();
            obj.startDateStr = $("#startDateStr").val();
            obj.endDateStr = $("#endDateStr").val();
            if(id !=''){
                obj.id = id;
            }
          //提交
            $.ajax({
                type:'post',
                url:url,
                data :JSON.stringify(obj),
                cache:false,
                contentType:"application/json;charset=utf-8",
                dataType:'json',
                success:function(data){
                    if (data.code > 0) {
                       layer.msg(data.msg,{icon: 1});
                       location.reload();
                    }else{
                        layer.msg(data.msg,{icon: 2});
                    }
                }
            });
        }

        function delActivityInfo (obj){
            var id = $(obj).attr("data-id")
            layer.confirm('是否确认删除?', {
              btn: ['是','否'] //按钮
              ,cancel: function(index, layero){
                //取消操作，点击右上角的X
              }
            }, function(){
                $.ajax({
                    type:'post',
                    url:'/activityInfoCtl/delPromotion',
                    data:{'id' : id},
                    cache:false,
                    async: false,
                    dataType:'json',
                    success:function(data){
                        if(data.code>0){
                            layer.msg("删除成功",{icon: 1});
                            setTimeout(function() {
                                 window.location.reload();
                            },2500)
                        }else{
                            layer.msg("删除失败",{icon: 2});
                        }
                    }
                });
            }, function(){
            //否
            });
        }
    </script>
</div>
</body>
</html>
